<!DOCTYPE html>
<html>

<head>
    <title>MiniUI Panel</title>
    <!--jQuery js-->
    <script src="lib/jquery.min.js" type="text/javascript"></script>
    <!--MiniUI-->
    <link href="lib/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
    <script src="lib/miniui/miniui.js" type="text/javascript"></script>
    <style>
        .container-style {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            gap: 5px;
        }

        .hover-style {
            box-shadow: none;
            border: none;
        }

        .hover-style:hover {
            background-color: #87bdec;
        }
    </style>
</head>

<body>
    <div class="mini-panel" title="面板标题" style="width:100%;height:200px;border: 0;" bodyStyle="padding: 0;">
        <div>这里是面板内容</div>
    </div>
    <div id="myPanel" class="mini-panel" title="面板标题" style="width:100%;height:200px;border: 0;"
        bodyStyle="padding: 0;">
        <div id="contentDiv">这里是面板内容</div>
    </div>
    <div class="mini-panel" title="面板标题" style="width:100%;height:200px;border: 0;" bodyStyle="padding: 0;">
        <div>这里是面板内容</div>
    </div>

    <script>
        // 1
        // btnContainer.style.display = "flex";
        // btnContainer.style.position = "absolute";
        // btnContainer.style.right = "10px";
        // btnContainer.style.top = "50%";
        // btnContainer.style.transform = "translateY(-50%)";
        // 2
        // btnContainer.style.cssText = `
        //     position: absolute;
        //     right: 20px;
        //     top: 50%;
        //     transform: translateY(-50%);
        //     display: flex;
        //     gap: 5px;
        // `;
        mini.parse();
        setTimeout(() => {
            var panel = mini.get("myPanel");
            var header = panel.getEl().querySelector(".mini-panel-header");
            var buttonContainer = document.createElement("div");
            buttonContainer.classList.add("container-style");
            var buttonState = document.createElement("button");
            buttonState.classList.add('hover-style');   // 此方法在老项目中不好使
            buttonState.innerHTML = "状态信息";
            buttonState.onclick = showLcuState; // 箭头函数在老项目中不好使，用function
            var buttonLadder = document.createElement("button");
            buttonLadder.classList.add('hover-style');
            buttonLadder.innerHTML = "逻辑梯形图";
            buttonLadder.onclick = showLadderDiagram;
            buttonContainer.appendChild(buttonState);
            buttonContainer.appendChild(buttonLadder);
            header.appendChild(buttonContainer);
        }, 100);
        //  $(() => {
        //     var panel = mini.get("myPanel");
        //     var header = panel.getEl().querySelector(".mini-panel-header");
        //     var btnContainer = document.createElement("div");
        //     btnContainer.style.cssText = `
        //         position: absolute;
        //         right: 20px;
        //         top: 50%;
        //         transform: translateY(-50%);
        //         display: flex;
        //         gap: 5px;
        //     `;
        //     var addButton = document.createElement("a");
        //     addButton.className = "mini-button";
        //     addButton.innerHTML = "<span class='mini-icon icon-add'></span>状态信息";
        //     addButton.onclick = function() { alert("添加成功"); };
        //     var removeButton = document.createElement("a");
        //     removeButton.className = "mini-button";
        //     removeButton.innerHTML = "<span class='mini-icon icon-remove'></span>逻辑梯形图";
        //     removeButton.onclick = function() { alert("删除成功"); };
        //     btnContainer.appendChild(addButton);
        //     btnContainer.appendChild(removeButton);
        //     header.appendChild(btnContainer);
        // });
        function showLcuState() {
            try {
                const content = "<input type='button' value='状态信息' />";
                const contentDiv = jQuery("#contentDiv");
                contentDiv.html("");
                contentDiv.html(content);
            } catch (error) {
                debugger;
            }
        }

        function showLadderDiagram() {
            try {
                const content = "<img src='diagrams/lcu1.png' alt='显示不出来' style='width: 100%; height: 100%' />";
                const contentDiv = jQuery("#contentDiv");
                contentDiv.html("");
                contentDiv.html(content);
            } catch (error) {
                debugger;
            }
        }
    </script>
</body>

</html>